<template>
    <div>
        <div class="opt-area-02">
            <div class="right-con">
               <!-- <div class="input-frame">
                    <Input type="text" placeholder="请输入接收单位登录账号" clearable v-model="params.accept_login_no" icon="ios-search" />
                </div>-->
                <div class="input-frame">
                    <Input type="text" placeholder="请输入人员姓名" clearable v-model="params.name" icon="ios-search"/>
                </div>
                <div class="input-frame">
                    <Input type="text" placeholder="请输入身份证号" clearable v-model="params.idcard" icon="ios-search" />
                </div>
                <Button type="primary" @click="searchList">搜索</Button>
               <!-- <Button type="error" @click="batchReject" class="btn-style">批量驳回</Button>-->
            </div>
        </div>
        <vxe-toolbar custom></vxe-toolbar>
        <vxe-table
                border
                resizable
                highlight-hover-row
                export-config
                max-height="500"
                size="medium"
                :loading="countData.loading"
                align="center"
                header-align="center"
                :sort-config="{trigger: 'cell'}"
                :data="ReDataList"
                @checkbox-change="selectList"
                @checkbox-all="selectList">
            <vxe-table-column type="checkbox" width="60" fixed="left"></vxe-table-column>
          <!--  <vxe-table-column field="state" title="比对状态" width="150" fixed="left">
                <template v-slot:header="{ column }">
                    <span>{{ column.title }}</span>
                    <Tooltip :content="compareContent" theme="light" :transfer="true">
                        <Icon type="md-help-circle"/>
                    </Tooltip>
                </template>
                <template slot-scope="{ row }">
                    <div style="color: green" v-if="row.gong_an_comparison == '2'">正确</div>
                    <div style="color: red" v-if="row.gong_an_comparison == '3'">错误</div>
                    <div style="color: gray" v-if="row.gong_an_comparison != '2' && row.gong_an_comparison != '3'">未比对
                    </div>
                </template>
            </vxe-table-column>-->
            <vxe-table-column field="recode_no" title="档号" width="150"></vxe-table-column>
            <vxe-table-column field="name" title="姓名" width="150"></vxe-table-column>
            <vxe-table-column field="idcard" width="180" title="身份证号"></vxe-table-column>
            <vxe-table-column field="sex" title="性别" width="140">
                <template slot-scope="{ row }">
                    <div v-if="row.sex == '0'">男</div>
                    <div v-if="row.sex == '1'">女</div>
                </template>
            </vxe-table-column>
            <vxe-table-column field="nation" title="民族" width="120"></vxe-table-column>
            <vxe-table-column field="company_code" title="机构编号" width="120"></vxe-table-column>
            <vxe-table-column field="office_name" title="机构名称" width="120"></vxe-table-column>
            <vxe-table-column field="manager_recode_no" title="档案交接号" width="120"></vxe-table-column>
            <vxe-table-column field="accept_company_code" title="交接单位" width="120"></vxe-table-column>
            <vxe-table-column field="accept_login_no" title="交接账号" width="120"></vxe-table-column>
            <vxe-table-column field="accept_login_name" title="交接用户" width="150"></vxe-table-column>
            <vxe-table-column field="serial_number" title="流水号" width="120"></vxe-table-column>
            <vxe-table-column field="img_total" title="总页数" width="120"></vxe-table-column>
            <vxe-table-column field="action" title="操作" width="200" fixed="right">
                <template slot-scope="{ row }">
                    <Button type="error" size="small" @click="returnAction(row)">驳回</Button>
                </template>
            </vxe-table-column>
        </vxe-table>
    </div>
</template>

<script>
import { getReceivedByCodeList, updateReceived, updateRejectBatch } from '@/api/record'
export default {
  name: 'index',
  data () {
    return {
      params: {},
      countData: {
        loading: false
      },
      ReDataList: [],
      compareContent: '姓名、身份证号与公安库比对后结果'
    }
  },
  methods: {
    init () {
      this.countData.loading = true
      const param = {
        name: this.params.name,
        idcard: this.params.idcard
      }
      getReceivedByCodeList(param).then(ret => {
        const data = ret.data
        if (data.errcode === 0) {
          this.ReDataList = data.data
          this.countData.loading = false
        } else {
          this.countData.loading = false
          this.error(data)
        }
      })
    },
    searchList () {
      this.init()
    },
    selectList ({ records }) {
      this.selection = records
    },
    returnAction (row) {
      this.$Modal.confirm({
        title: '确认驳回此人么？',
        content: '请仔细核对后再操作',
        loading: true,
        onOk: () => {
          updateReceived({ receiveId: row.id }).then(ret => {
            let data = ret.data
            if (data.errcode === 0) {
              this.$Modal.remove()
              this.init()
              this.success('驳回成功')
            } else {
              this.$Modal.remove()
              this.error(data)
            }
          })
        }
      })
    },
    batchReject (val) {
      const list = this.selection
      console.log(list.length, list, '驳回数据')
      for (let i = 0; i < this.selection.length; i++) {
        updateRejectBatch({ id: this.selection[i].id }).then(ret => {
          console.log(ret, '接口中的数据')
        })
      }
    },
    success (val) {
      val = this.$common.xeUtils.isEmpty(val) ? '操作成功' : val
      this.$Message.success(val)
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style scoped>
    .opt-area-02 {
        display: flex;
        align-items: center;
        flex-direction: column;
        border: 1px solid #abdcff;
        background-color: #f0faff;
        padding: 8px 16px 8px 16px;
        border-radius: 4px;
        margin-bottom: 10px;
    }
    .opt-area-02 .right-con {
        width: 100%;
        display: flex;
    }
    .input-frame {
        margin-right: 10px;
    }
    .btn-style{
        margin-left: 10px;
    }
</style>
